<template>
  <view>
    <view v-if="!isShow">
      <web-view
        :src="h5Url"
        :webview-styles="{ top: webWTop, height: webWHeight }"
        ref="webview"
        @message="handleMessage"
      ></web-view>
    </view>
    <!--联系客服弹窗-->
    <u-popup :show="isShow" mode="center" round="40" bgColor="#FFFFFF">
      <view class="title-block bg-title-block text-sm"
        >网络异常，请联系客服</view
      >
      <view class="w-80 pb-5 pt-14">
        <view class="mx-4 relative">
          <view class="flex justify-center items-center">
            <u-image
              width="520rpx"
              height="520rpx"
              src="/static/images/cityEwm.png"
              radius="30"
            >
            </u-image>
          </view>
          <view class="text-sm text-light text-center leading-10 mt-2"
            >截图保存到相册或打开微信扫一扫添加</view
          >
        </view>
      </view>
    </u-popup>
  </view>
</template>

<script>
export default {
  data() {
    return {
      isShow: false,
      h5Url: '',
      webWTop: uni.getSystemInfoSync().statusBarHeight,
      webWHeight:
        uni.getSystemInfoSync().screenHeight -
        uni.getSystemInfoSync().statusBarHeight,
    };
  },
  onLoad() {
    // 通道线路自动选择
    this.entranceTab(process.env.VUE_APP_ENTRANCE, 1);
    var _this = this;
    plus.key.addEventListener('backbutton', () => {
      let pages = getCurrentPages();
      let page = pages[pages.length - 1];
      if (page.$getAppWebview().children()[0]) {
        page.$getAppWebview().children()[0].evalJS('window.myHistory()');
      } else {
        this.$Router.back();
      }
      alert('BackButton Key pressed!');
    });
  },
  methods: {
    //路由跳转
    goTo(url) {
      this.$Router.push({
        name: url,
      });
    },
    // 通道线路自动选择 => 默认进入第一通道，当第一通道无法访问就选第二通道，以此类推。
    async entranceTab(entrance, type) {
      let _this = this;
      uni.request({
        url: entrance,
        success: function (res) {
          // 请求成功，说明已连接外网 => 此路能通
          _this.h5Url =
            entrance +
            '?Version=' +
            uni.getStorageSync('Version' + process.env.VUE_APP_PLATFORMID) +
            '&Brand=' +
            uni.getSystemInfoSync().deviceBrand +
            '&DeviceId=' +
            uni.getStorageSync('DeviceId' + process.env.VUE_APP_PLATFORMID);
        },
        fail: function (res) {
          //console.log(res, type);
          if (type == 2) {
            //线路不通时弹窗显示联系在线客服入口
            _this.isShow = true;
          } else if (type == 1) {
            // 请求失败，说明未连接外网 => 此路不通，走另一条路
            return _this.entranceTab(process.env.VUE_APP_ENTRANCE2, 2);
          }
        },
      });
    },
    //uniapp编译h5端页面发来的消息 => 业务逻辑代码处理
    handleMessage(e) {
      let data = e.detail.data[0];
      //console.log(e);
      //保存图片
      if (data.optType == 'downloadImage') {
        uni.saveImageToPhotosAlbum({
          filePath: data.filePath,
          success() {
            uni.showToast({
              title: '已保存至相册',
            });
          },
          fail: function (res) {
            console.log(res);
          },
        });
      }
    },
  },
};
</script>

<style lang="less" scoped>
.title-block {
  position: absolute;
  top: -15rpx;
  z-index: 3;
  left: 50%;
  margin-left: -202rpx;
  width: 404rpx;
  height: 80rpx;
  line-height: 80rpx;
  padding-top: 16rpx;
  text-align: center;
  color: #fff;
  background-size: 100% 100%;
}
</style>
